There are two main options for using javascript functions in templating

  • Using inline javascript
  • Calling externally defined functions by name

Using inline javascript

You can add inline javascript anywhere in the parsed part of templates (ie usually the body) using the #script directive.

The script is evaluated as it is encountered by the templating engine. Its not normally used to generate output, instead these functions are normally used to calculate values which are placed in context and then used by the template.

You can place your javascript directly inside the #script directive, or (optionally) you can add <script> tags around your code. This will give you better IDE support and colour coding

Example of inline javascript

		<html>
		    <body>
		        <div class='container'>
		            <h2>Calculator</h2>    
		            
		            #script()
		            <script>
		                var x = parseInt(http.request.params.x);
		                var y = parseInt(http.request.params.y);
		                var result = x + y;
		                log.info("calculate {} + {} = {}", x, y, result);
		                templatingContext.result = result;
		            </script>
		            #end
		            
		            <form>
		                <input name='x' value="$params.x" /> + <input name='y'value="$params.y" /> = $result
		                <button>Calculate</button>
		            </form>
		        </div>
		    </body>
		</html>

 

The result looks like this:

 

Calling externally defined functions by name

When using custom controller mappings either in a custom app or in a website you can specify JavaScript files, these files may contain funtions that you would like to access when generating templates.

For more information on creating javascript controllers see here

If the controller mappings is defined in a custom app you can access the functions like this:

		$controllers.call('myFunction')

Or to access the API of another custom app you would call:

		$applications.theAppId.call('theFunction')

The same can be achieved when defining JavaScript methods for a website controller, for example you might have the following function:

		function getPercentColor(percent){
		if(percent >= 95) {
		return 'green';
		} else if(percent >= 80) {
		return 'yellow';
		} else {
		return 'red';
		}
		}

To use that function in any templated page you would do the following:

		$applications.content.call('getPercentColor', 25)

Which will return "red"

Another example is getting a list and looping through it. for example let's say we have a user and want a list of all the groups that user belongs to:

		function getUsersMemberships(user){
		var list = [];
		user.memberships.forEach(function(membership){
		list.push(membership.groupName);
		});
		return list;
		}

Now to use that method and show a list of users on the template you might have a template like this:

		<html>
		<head>
		<title>Users Groups</title>
		</head>
		<body>
		<div class="table-responsive">
		<table class="table">
		<tbody>
		#foreach($g in $applications.content.call('getUsersMemberships', $user))
		<tr>
		<td>$g</td>
		</tr>
		#end
		</tbody>
		</table>
		</div>
		</body>
		</html>
Hide comments

Ask a question, or offer an answer